<template>
  <div class="dialog_diy">
    <el-dialog
      :visible="isShow"
      fullscreen
      center
      class="add"
      @close="closeEvent"
    >
      <template #title>
        <div class="title">{{ metaList[meta] }}</div>
      </template>
      <el-form
        ref="form"
        label-width="80px"
        class="form"
        :model="form"
        :rules="rules"
      >
        <el-form-item label="学科" prop="subject">
          <el-select
            v-model="form.subject"
            placeholder="请选择"
          ><el-option
            v-for="(item, index) in subjectList"
            :key="index"
            :label="item.short_name"
            :value="item.id"
          /></el-select>
        </el-form-item>
        <el-form-item label="阶段" prop="step">
          <el-select
            v-model="form.step"
            placeholder="请选择"
          ><el-option
            v-for="(item, key, index) in stepObj"
            :key="index"
            :label="item"
            :value="+key"
          /></el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterprise">
          <el-select
            v-model="form.enterprise"
            placeholder="请选择"
          ><el-option
            v-for="(item, index) in enterpriseList"
            :key="index"
            :label="item.short_name"
            :value="item.id"
          /></el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-cascader v-model="form.city" size="large" :options="options" />
        </el-form-item>
        <el-form-item label="题型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio
              v-for="(value, key, index) in typeObj"
              :key="index"
              :label="+key"
            >{{ value }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="form.difficulty">
            <el-radio
              v-for="(value, key, index) in diffObj"
              :key="index"
              :label="+key"
            >{{ value }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <hr>
        <!-- 试题标题 -->
        <el-form-item label="试题标题" class="quill-wrapDad" prop="title">
          <quillEditor ref="quillEditor" v-model="form.title" />
        </el-form-item>
        <hr>
        <!-- 单选 -->
        <div v-if="form.type === 1">
          <el-form-item label="单选" prop="single_select_answer">
            <el-row>
              <el-radio-group v-model="form.single_select_answer">
                <el-col
                  v-for="(item, index) in form.select_options"
                  :key="index"
                  class="flex"
                >
                  <el-radio :label="item.label">{{ item.label }}</el-radio>
                  <el-input v-model="item.text" />
                  <Uploadimg v-model="item.image" />
                </el-col>
              </el-radio-group>
            </el-row>
          </el-form-item>
        </div>
        <!-- 多选 -->
        <div v-else-if="form.type === 2">
          <el-form-item label="多选" prop="multiple_select_answer">
            <el-checkbox-group v-model="form.multiple_select_answer">
              <el-row>
                <el-col
                  v-for="(item, index) in form.select_options"
                  :key="index"
                  class="flex"
                >
                  <el-checkbox :label="item.label" :value="item.label">{{
                    item.label
                  }}</el-checkbox>
                  <el-input v-model="item.text" />
                  <Uploadimg
                    v-model="item.image"
                  /></el-col>
              </el-row>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <!-- 简答 -->
        <div v-else>
          <el-form-item label="简答" prop="short_answer">
            <el-input v-model="form.short_answer" type="textarea" :rows="5" />
          </el-form-item>
        </div>
        <hr>
        <!-- 解析视频 -->
        <el-form-item label="解析视频">
          <Uploadvideo v-model="form.video" />
        </el-form-item>
        <hr>
        <!-- 答案解析 -->
        <el-form-item
          label="答案解析"
          class="quill-wrapDad"
          prop="answer_analyze"
        >
          <quillEditor ref="quillEditor" v-model="form.answer_analyze" />
        </el-form-item>
        <hr>
        <!-- 试题备注 -->
        <el-form-item label="试题备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div style="text-align: center">
          <el-button @click="closeEvent">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { questionAdd, questionEdit } from '@/api/questions'
import quillEditor from './quillEditor/index.vue'
import Uploadimg from './uploading/uploadimg.vue'
import Uploadvideo from './uploading/upVideo.vue'
// 城市
import { regionData } from 'element-china-area-data'
export default {
  components: { quillEditor, Uploadimg, Uploadvideo },
  props: [
    'isShow',
    'subjectList',
    'enterpriseList',
    'diffObj',
    'typeObj',
    'stepObj'
  ],
  data() {
    return {
      meta: 'add',
      metaList: { add: '新增新增题库测试', edit: '编辑题库测试' },
      options: regionData,
      form: {
        title: '', // 是	string	标题
        subject: '', // 是	int	学科id标识
        step: '', // 是	int	阶段1、初级 2、中级 3、高级
        enterprise: '', // 是	int	企业id标识
        city: [], // 是	array	[省、市、区县]
        type: 1, // 是	string	题型 1单选 、2多选 、3简答
        difficulty: '', // 是	int	题目难度 1简单 、2一般 、3困难
        single_select_answer: '', // 是	string	单选题答案
        multiple_select_answer: [], // 是	array	多选题答案
        short_answer: '', // 是	string	简答题答案
        video: '', // 否	string	解析视频地址
        answer_analyze: '', // 是	string	答案解析
        remark: '', // 是	string	答案备注
        select_options: [
          { label: 'A', text: '', image: '' },
          { label: 'B', text: '', image: '' },
          { label: 'C', text: '', image: '' },
          { label: 'D', text: '', image: '' }
        ] // 是	array	选项，介绍，图片介绍
      },
      rules: {
        title: [{ required: true, message: '必填', trigger: 'change' }],
        subject: [{ required: true, message: '必填', trigger: 'change' }],
        step: [{ required: true, message: '必填', trigger: 'change' }],
        enterprise: [{ required: true, message: '必填', trigger: 'change' }],
        city: [{ required: true, message: '必填', trigger: 'change' }],
        type: [{ required: true, message: '必填', trigger: 'change' }],
        difficulty: [{ required: true, message: '必填', trigger: 'change' }],
        single_select_answer: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        multiple_select_answer: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        short_answer: [{ required: true, message: '必填', trigger: 'change' }],
        video: [{ required: true, message: '必填', trigger: 'change' }],
        answer_analyze: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        remark: [{ required: true, message: '必填', trigger: 'change' }],
        select_options: [{ required: true, message: '必填', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 取消按钮
    closeEvent() {
      this.$refs.form.resetFields()
      this.$emit('update:is-show', false)
      // this.$refs.quillEditor.content = ''
      this.form = {
        meta: 'add', // 是	string	标题
        subject: '', // 是	int	学科id标识
        step: '', // 是	int	阶段1、初级 2、中级 3、高级
        enterprise: '', // 是	int	企业id标识
        city: [], // 是	array	[省、市、区县]
        type: '', // 是	string	题型 1单选 、2多选 、3简答
        difficulty: '', // 是	int	题目难度 1简单 、2一般 、3困难
        single_select_answer: '', // 是	string	单选题答案
        multiple_select_answer: [], // 是	array	多选题答案
        short_answer: '', // 是	string	简答题答案
        video: '', // 否	string	解析视频地址
        answer_analyze: '', // 是	string	答案解析
        remark: '', // 是	string	答案备注
        select_options: [
          { label: 'A', text: '', image: '' },
          { label: 'B', text: '', image: '' },
          { label: 'C', text: '', image: '' },
          { label: 'D', text: '', image: '' }
        ] // 是	array	选项，介绍，图片介绍
      }
    },
    // 确认按钮
    submit() {
      this.$refs.form.validate(async(result) => {
        console.log(this.form.subject)
        if (result) {
          if (this.meta === 'add') {
            await questionAdd(this.form)
            this.$message.success('新增成功')
          } else {
            console.log(this.form.select_options.image)
            await questionEdit(this.form)
            this.$message.success('编辑成功')
          }
          this.closeEvent()
          this.$emit('getDate')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog_diy {
  ::v-deep .el-dialog__wrapper {
    .el-dialog {
      .el-form-item.quill-wrapDad .el-form-item__content {
        margin-left: 0 !important;
        margin-top: 50px;
        .quill-wrap {
          .ql-container {
            // min-height: 110px;
          }
          .quill-editor {
            width: 835px;
          }
        }
      }
      .el-dialog__header {
        padding: 0px;
        text-align: left;
        background-image: linear-gradient(
          to right,
          rgb(1, 196, 249),
          rgb(19, 148, 250)
        );
        .el-dialog__headerbtn .el-dialog__close {
          color: #fff;
        }
        .title {
          padding-left: 15px;
          color: #fff;
          height: 54px;
          line-height: 54px;
        }
      }
      .el-form-item__label {
        text-align: left;
      }
    }
  }
  .add {
    .form {
      width: 835px;
      margin: 0 auto;
    }
  }
  .flex {
    display: flex;
    align-items: center;
  }
}
</style>
